import React, {useState,useEffect} from 'react';
import { Image,Space,Skeleton } from 'antd';
import {
    RotateLeftOutlined,
    RotateRightOutlined,
    SwapOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
} from '@ant-design/icons';
import './style.less'
function Index(props) {
    const [width,setWidth] = useState(80);
    const [height,setHeight] = useState(80);
    const [itemsSrc,setItemsSrc] = useState([]);
    const [preview,setPreview] = useState(true);
    const [previewSrc,setPreviewSrc] = useState(null);
    const imageExtensions = ['jpg', 'jpeg', 'gif', 'png'];
    const videoExtensions = ['mp4', 'wmv', 'avi', 'mov'];

    useEffect(()=>{
        // console.log(props)
        props.width && setWidth(props.width);
        props.height && setHeight(props.height);
        setPreview(props.preview)
        if (props.src){
            setItemsSrc(props.src)
            if (getType(props.src[0])){
                setPreviewSrc(props.src[0]+"?x-oss-process=video/snapshot,t_1,f_jpg,w_0,h_0,m_fast")
            }
            else{
                setPreviewSrc(props.src[0])
            }
        }
    },[])

    const getType = (s) => {
        try {
            return videoExtensions.includes(s.split('.').pop().toLowerCase())
        } catch (err){
            return false
        }
    }
    const getUrl = (s) => {
        if (getType(s)){
            return s+"?x-oss-process=video/snapshot,t_1,f_jpg,w_0,h_0,m_fast";
        }
        else{
            return s
        }
    }
    return (
        <Image.PreviewGroup
            preview={{
                imageRender: (_,info) => {
                    if (getType(itemsSrc[info.current])){
                        return <video
                            muted
                            width="700"
                            // height="240"
                            controls
                            src={itemsSrc[info.current]}
                        />
                    }
                    else {
                        return _
                    }
                },
                toolbarRender: (
                    _,
                    {
                        transform: { scale },
                        actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },
                        current,
                    },
                ) => {
                    if (getType(itemsSrc[current])){
                        return null
                    }
                    else{
                         return <Space size={12} className="toolbar-wrapper">
                            <SwapOutlined rotate={90} onClick={onFlipY} />
                            <SwapOutlined onClick={onFlipX} />
                            <RotateLeftOutlined onClick={onRotateLeft} />
                            <RotateRightOutlined onClick={onRotateRight} />
                            <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
                            <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
                        </Space>
                    }
                },
            }}
        >
            <Space>
                {
                    itemsSrc.map((item,index)=>{
                        return <Image
                            key={index}
                            width={width}
                            height={height}
                            src={getUrl(item)}
                            preview={preview}
                            placeholder={<Skeleton.Image
                                style={{
                                    width: width,
                                    height: height
                                }}
                                active={true}
                            />}
                            fallback=""
                        />
                    })
                }
            </Space>
        </Image.PreviewGroup>
    );
}

export default Index;
